<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="设置"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-cell-group>
      <van-cell title="绑定用户名" :value="usermsg" @click="username" />
      <van-cell title="修改密码" @click="password" />
      <van-dialog
        v-model="show"
        confirm-button-color="red"
        class="username"
        :close-on-click-overlay="true"
        @confirm="usersign"
      >
        <p class="setname">设置用户名</p>
        <van-cell-group>
          <van-field v-model="value1" placeholder="请输入用户名" />
        </van-cell-group>
      </van-dialog>

      <van-dialog
        v-model="xianshi"
        confirm-button-color="red"
        class="password"
        :close-on-click-overlay="true"
        @confirm="usernewword"
      >
        <p class="setname">更新密码</p>
        <van-cell-group>
          <van-field v-model="value2" placeholder="原始密码" />
        </van-cell-group>
        <van-cell-group>
          <van-field v-model="value3" placeholder="新密码" />
        </van-cell-group>
      </van-dialog>
    </van-cell-group>
    <van-button
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      class="exit"
      @click="exit()"
    >
      退出登录
    </van-button>
  </div>
</template>

<script>
import Vue from 'vue';
import { NavBar } from "vant";
Vue.use(NavBar);
import { Toast } from "vant";
import { user, bindusername, updatePassword } from "../api/my";

export default {
  name: "set",
  data() {
    return {
      show: false,
      msg: "",
      xianshi: false,
      value1: "",
      value2: "",
      value3: "",
      usermsg: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    username() {
      if (this.usermsg) {
        Toast("亲,用户名只能更改一次哦！");
      }
    },
    password() {
      this.xianshi = true;
    },
    exit() {
      localStorage.removeItem("token");
      localStorage.removeItem("userid");
      localStorage.removeItem("username");
      localStorage.removeItem("loginState");
      this.$router.replace("/my");
    },
    usersign() {
      //发送请求
      user({ userid: localStorage.getItem("userid") }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          console.log(res.data.data);
        }
      });
      bindusername({
        userid: localStorage.getItem("userid"),
        username: this.value1,
      }).then((res) => {
        if (res.data.code == 200) {
          this.usermsg = this.value1;
        }
      });
    },
    usernewword() {
      updatePassword({
        userid: localStorage.getItem("userid"),
        oldpassword: this.value2,
        newpassword: this.value3,
      }).then((res) => {
        if (res.data.code == "10030") {
          console.log("原始密码错误");
          return;
        } else {
          localStorage.removeItem("token");
          localStorage.removeItem("userid");
          localStorage.removeItem("username");
          localStorage.removeItem("loginState");
          this.$router.replace("/reg");
        }
      });
    },
  },
  created() {
    user({ userid: localStorage.getItem("userid") }).then((res) => {
      if (res.data.code == 200) {
        if (res.data.data[0].username) {
          this.show = false;
          this.usermsg = res.data.data[0].username;
        } else {
          this.show = true;
        }
      }
    });
  },
};
</script>

<style scoped>
.exit {
  width: 100%;
  margin-top: 16px;
  border-radius: 16px;
}
.username {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
}
.password {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
}
.setname {
  /* margin: 0 auto; */
  width: 100%;
  text-align: center;
  padding-top: 8px;
  font-weight: 700;
  font-size: 20px;
}
</style>